@import './main.less';
.app {
    >.index {
        height: 100vh;
        overflow: hidden;
        .flexColumn;
        .head {
            .remH(98);
            background-color: #1a9bff;
            padding-left: @r*25rem;
            line-height: @r*98rem;
            font-size: @r*30rem;
            color: #ffffff;
            .icon-site {
                .remW(45);
                .remH(60);
                .icon-site;
                vertical-align: middle;
            }
        }
        .content {
            flex: 1;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            .scenicArea {
                .list {
                    .item {
                        padding: @r*20rem 0;
                        margin: 0 @r*25rem;
                        .remH(200);
                        border-bottom: 1px solid #e0e0e0;
                        .flex;
                        .scenic-img {
                            .remW(160);
                            .remH(160);
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .scenic-info {
                            flex: 1;
                            padding-left: @r*30rem;
                            overflow: hidden;
                            .scenic-name {
                                // margin-bottom: @r*10rem;
                                font-size: @r*30rem;
                                color: #199bfd;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                position: relative;
                                padding-right:  @r*84rem;
                                .mianfei{
                                    position: absolute;
                                    top:  @r*4rem;
                                    right: @r*4rem;
                                    background: url(../image/mianfei.png) 0 0 no-repeat;
                                    background-size: 100% 100%;
                                    .remW(80);
                                    .remH(32);
                                    line-height: @r*32rem;
                                    text-align: center;
                                    font-size: @r*24rem;
                                    color: #ffffff;
                                }
                            }
                            .scenic-introduction {
                                font-size: @r*25rem;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                word-break: break-all;
                                line-height: @r*40rem;
                                .remH(80);
                                overflow: hidden;
                            }
                        }
                        .scenic-site {
                            .icon-site {
                                .remW(30);
                                .remH(40);
                                .icon-site2;
                                vertical-align: text-bottom;
                            }
                        }
                    }
                }
            }
        }
        .downloadAPP {
            .remH(160);
            max-height: 15vh;
            border-top: 1px solid #e0e0e0;
            overflow: hidden;
            position: relative;
            img {
                width: 100%;
                // height: 100%;
            }
            .del {
                position: absolute;
                top: 0;
                right: 0;
                .remH(50);
                .remW(50);
                z-index: 9;
            }
        }
    }
    >.site {
        .head {
            >div {
                .remH(98);
                .flexCenter;
                position: relative;
                a {
                    position: relative;
                    z-index: 99;
                }
                .icon-return {
                    .icon-return;
                    .remH(50);
                    .remW(50);
                    margin-left: @r*20rem;
                }
                >span {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    text-align: center;
                    line-height: @r*98rem;
                }
            }
        }
        .content {
            .sitetap {
                .flexCenter;
                .remH(100);
                div {
                    flex: 1;
                    text-align: center;
                    span {
                        padding: @r*10rem 0;
                        border: 1px solid transparent;
                    }
                    &.active {
                        color: #199bfd;
                        span {
                            border-bottom-color: #199bfd;
                        }
                    }
                }
            }
            .list {
                background-color: #edeff0;
                min-height: 70vh;
                font-size: @r*15rem;
                .item {
                    padding: 0 @r*20rem;
                    .top {
                        .remH(60);
                        line-height: @r*60rem;
                    }
                    .buttonWrap {
                        >div {
                            width: 30%;
                            .remH(60);
                            display: inline-block;
                            line-height: @r*60rem;
                            font-size: @r*28rem;
                            text-align: center;
                            background-color: #ffffff;
                            margin-bottom: @r*10rem;
                            border-radius: 2px;
                            &:not(:nth-child(3n+1)) {
                                margin-left: 3%;
                            }
                        }
                    }
                }
            }
        }
    }
}